<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>预约信息 - 已取消</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<style>
			.status-bar {
				height: 44px;
				background-color: #000;
				color: white;
				display: flex;
				align-items: center;
				padding: 0 15px;
			}

			.header-section {
				padding: 15px;
				background: #fff;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.content-section {
				padding: 15px;
			}

			.workorder-info {
				margin-bottom: 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.status-tag {
				padding: 4px 8px;
				border-radius: 4px;
				background: #6c757d;
				color: white;
			}

			.info-table {
				width: 100%;
				border-collapse: separate;
				border-spacing: 0 10px;
			}

			.info-table td {
				padding: 8px;
				border-bottom: 1px solid #e9ecef;
			}

			.label-td {
				width: 120px;
				color: #6c757d;
			}

			.date-td {
				color: #f0ad4e;
			}

			.image-td {
				display: flex;
				gap: 10px;
			}

			.image-placeholder {
				width: 80px;
				height: 80px;
				background: #eee;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #ddd;
			}

			.charge-item {
				padding: 10px;
				border-bottom: 1px solid #e9ecef;
			}

			.charge-summary {
				text-align: right;
				color: #dc3545;
				font-weight: bold;
			}

			.approval-process {
				margin-top: 15px;
			}

			.process-step {
				padding: 10px;
				border-left: 2px dashed #ddd;
				margin-left: 15px;
			}

			.step-dot {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				display: inline-block;
				margin-right: 5px;
			}

			.cancel-info {
				margin-top: 15px;
				padding: 15px;
				background: #f8f9fa;
			}

			.bottom-actions {
				position: fixed;
				bottom: 56px;
				width: 100%;
				padding: 15px;
				display: flex;
				justify-content: end;
				gap: 10px;
				z-index: 1000;
			}

			.bottom-nav {
				position: fixed;
				bottom: 0;
				width: 100%;
				background: #fff;
				border-top: 1px solid #e9ecef;
				padding: 10px 0;
			}

			.unpaid-seal {
				position: absolute;
				left: 0;
				top: 0;
				width: 100px;
				height: 50px;
				background: url('https://via.placeholder.com/100x50/ffe4e1/ff0000?text=未支付') no-repeat;
				background-size: cover;
			}
		</style>
	</head>
	<body>


		<div class="container-fluid p-0">
			<!-- 标题栏 -->
			<div class="header-section d-flex justify-content-between align-items-center">
				<a href="YiQuXiao.html" class="text-decoration-none text-dark">
					<i class="bi bi-arrow-left"></i>
				</a>
				<h5 class="mb-0">预约信息</h5>
				<div class="d-flex align-items-center">
					<a href="#" class="text-decoration-none text-dark me-3">
						<i class="bi bi-three-dots-vertical"></i>
					</a>
					<a href="#" class="text-decoration-none text-dark">
						<i class="bi bi-qr-code"></i>
					</a>
				</div>
			</div>

			<!-- 内容区域 -->
			<div class="content-section">
				<input type="hidden" id="wid" />
				<input type="hidden" id="uid" />
				<div class="workorder-info">
					<span id="woNumber">维修单号：</span>
					<i class="bi bi-share ms-2"></i>
					<span class="status-tag">已取消</span>
				</div>

				<table class="info-table">
					<tr>
						<td class="label-td">故障位置：</td>
						<td id="faultLocationDetail"></td>
					</tr>
					<tr>
						<td class="label-td">维修日期：</td>
						<td class="date-td" id="repairDateDetail"></td>
					</tr>
					<tr>
						<td class="label-td">联系人：</td>
						<td id="contactNameDetail"></td>
					</tr>
					<tr>
						<td class="label-td">联系电话：</td>
						<td id="contactPhoneDetail"></td>
					</tr>
					<tr>
						<td class="label-td">故障描述：</td>
						<td id="faultReasonDetail"></td>
					</tr>

					<tr>
						<td class="label-td">维修人员：</td>
						<td id="wname"></td>
					</tr>
					<tr>
						<td class="label-td">维修电话：</td>
						<td id="wphone"></td>
					</tr>
				</table>
				<div class="info-item">
					<span>故障图片:</span>
					<div class="d-flex gap-2">
						<div class="bg-gray-200" style="width: 80px; height: 60px;">
							<!-- 使用 img 标签显示图片 -->
							<img id="faultImage1" src="" alt="故障图片1"
								style="width: 100%; height: 100%; object-fit: cover;">
						</div>
						<div class="bg-gray-200" style="width: 80px; height: 60px;">
							<!-- 使用 img 标签显示图片 -->
							<img id="faultImage2" src="" alt="故障图片2"
								style="width: 100%; height: 100%; object-fit: cover;">
						</div>
					</div>
				</div>
				<h6>收费项</h6>
				<!-- 收费项 -->
				<div class="charge-item" id="shoufei">

				</div>

				<!-- 审批进度 -->
				<div class="approval-process">
					<h6>审批进度</h6>
					<div class="process-step">
						<span class="step-dot bg-primary"></span> 发起人
						<p class="mb-0">王文州
							<span class="text-primary">发起</span>
							<span class="float-end">2024-6-24 10:22</span>
						</p>
					</div>
					<div class="process-step">
						<span class="step-dot bg-success"></span> 文员审批
						<p class="mb-0">李欧
							<span class="text-success">已通过</span>
							<span class="float-end">2024-6-24 14:10</span>
						</p>
					</div>
					<div class="process-step">
						<span class="step-dot bg-success"></span> 主管审批
						<p class="mb-0">冯总
							<span class="text-success">已通过</span>
							<span class="float-end">2024-6-24 14:10</span>
						</p>
					</div>
					<div class="process-step">
						<span class="step-dot bg-success"></span> 完成
					</div>
				</div>

				<!-- 取消工单信息 -->
				<div class="cancel-info">
					<h6>取消工单</h6>
					<p class="my-2">
						<span class="label-td">取消原因：</span>
						<span>协商一致取消</span>
					</p>
					<p class="my-2">
						<span class="label-td">提交人：</span>
						<span>冯总</span>
					</p>
					<p class="my-2">
						<span class="label-td">取消日期：</span>
						<span>2024-06-06 08:59</span>
					</p>
				</div>

				<!-- 底部固定按钮 -->
				<div class="bottom-actions">
					<button class="btn btn-outline-secondary" id="guanli">工单管理</button>
				</div>



			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
		<script src="js/jquery.js"></script>
		<script src="../js/request/base.js"></script>
		<script src="js/script/yyxxYQX.js"></script>
	</body>
</html>